<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/mui.picker.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/mui.poppicker.css" />
		<link rel="stylesheet" href="../css/mui.dtpicker.css" />
		<style>
			.flex {
				display: flex;
				margin: 10px auto;
			}
			
			.flex-item {
				flex: 1;
			}
			
			.radio-check {
				width: 80%;
				margin: 0 auto;
				border-bottom: 1px dashed #ccc;
			}
			
			.input-box {
				width: 80%;
				margin: 10px auto;
			}
			
			.time-check {
				width: 80%;
				margin: 0 auto;
				height: 40px;
				line-height: 40px;
				border: 1px solid #CCCCCC;
				text-indent: 15px;
				margin-bottom: 30px;
				font-size: 18px;
			}
			
			.tips {
				color: #CCCCCC;
			}
			
			.btn-box {
				text-align: center;
			}
			
			.search-btn {
				background-color: #FF9800;
				border-color: #FF9800;
				color: #fff;
				width: 60%;
				margin: 0 auto 20px;
			}
			
			.search-btn:active {
				background-color: #e6c697;
			}
		</style>
	</head>

	<body>
		<div id="app" class="mui-content">
			<div class="mui-card">
				<div class="mui-card-header" style="text-align: center;">查询条件</div>
				<div class="mui-card-content">
					<div class="flex">
						<div class="flex-item">
							<div class="mui-input-row mui-radio mui-left" @click="changeType(1)">
								<label>交易单号</label>
								<input name="radio1" type="radio" value="1" checked>
							</div>
						</div>
						<div class="flex-item">
							<div class="mui-input-row mui-radio mui-left" @click="changeType(2)">
								<label>商户订单</label>
								<input name="radio1" type="radio" value="2">
							</div>
						</div>
					</div>

					<div class="input-box">
						<input type="text" v-model="order" class="mui-input-clear" placeholder="请输入单号后6位">
					</div>
					<div class="time-check">
						<span class="tips">选择日期（可不选）</span>
					</div>
				</div>
				<div class="btn-box">
					<button type="button" class="search-btn mui-btn" @click="search">查询</button>
				</div>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../config.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script src="../js/mui.picker.js"></script>
		<script src="../js/mui.poppicker.js"></script>
		<script type="text/javascript" src="../js/mui.dtpicker.js"></script>
		<script type="text/javascript">
			mui.init()
			var vm = new Vue({
				el: '#app',
				data: function() {
					return {
						currentShopObj: {},
						type: 1,
						dateTime: '',
						order: '',
						data: []
					}
				},
				created: function() {
					var vm = this
					mui.plusReady(function() {
						vm.receiveParams()
						vm.bindEvent()
						vm.setPicker()
					})
				},
				methods: {
					receiveParams: function() {
						var self = plus.webview.currentWebview()
						this.currentShopObj = self.currentShopObj
					},
					bindEvent: function() {
						var vm = this
					},
					changeType: function(type) {
						this.type = type
					},
					setPicker: function() {
						var vm = this
						//时间选择
						var options = {
							'type': 'date'
						}
						var startTimePicker = new mui.DtPicker(options)
						var startTime = document.querySelector(".time-check")
						startTime.addEventListener('tap', function() {
							startTimePicker.show(function(item) {
								startTime.innerText = item.text
								vm.dateTime = item.text
							})
						})

					},
					search: function() {
						var vm = this
						if(vm.type) {
							mui('.search-btn').button('loading');
							config.ajax({
								url: '/buycoin/query',
								headers: {
									'Content-Type': 'application/json'
								},
								data: {
									type: vm.type,
									date: vm.dateTime ? new Date(vm.dateTime).format('yyyyMMdd') : '',
									order: vm.order
								},
								success: function(res) {
									mui('.search-btn').button('reset');
									if(res.result === 1) {
										vm.data = res.data
										if(res.data.length === 0) {
											mui.toast('未查询到此条记录！')
											return
										}
										mui.openWindow({
											url: 'coinDetail.html',
											id: 'coinDetail',
											styles: {
												top: 0, //新页面顶部位置
												bottom: 0, //新页面底部位置
												titleNView: {
													titleText: '订单详情',
													titleColor: "#FFFFFF",
													titleSize: "17px",
													backgroundColor: "#FF6800",
													autoBackButton: true,
													buttons: [{
														float: "right",
														fontSize: "18px",
														fontSrc: "_www/fonts/iconfont.ttf", //wap2app内置字体文件
														text: "\ue602",
														onclick: function() {
															var allPage = plus.webview.all()
															var nowPage = plus.webview.getWebviewById('index')
															for(var i = 0; i < allPage.length; i++) {
																if(allPage[i].getURL() !== nowPage.getURL()) {
																	plus.webview.close(allPage[i]);
																}
															}
														}
													}],
													splitLine: {
														color: "#CCCCCC",
														height: "1px"
													}
												}
											},
											extras: {
												currentShopObj: vm.currentShopObj,
												data: res.data
											},
										})
									} else {
										mui.toast(res.errormsg)
									}
								}
							})
						} else {
							mui.toast('请先选择查询类型')
							return
						}
					}
				}
			})
		</script>
	</body>

</html>